05. Viewing File Changes

Viewing Changes

We know that git log will show us the commits in a repository, and if we add the --stat flag, we can see what files were modified and how many lines of code were added or removed. Wouldn't it be awesome if we could see exactly what those changes were?

If this isn't the best part of a version control system, I don't know what is! Being able to see the exact changes that were made to a file is incredibly important! Being able to say, "oh, ok, so this commit adds 5 pixels of border-radius to the button!".

For example, in the blog project, the commit a3dc99a has the message "center content on page" and modifies the CSS file by adding 5 lines. What are those five lines that were added? How can we figure out what those 5 lines are?

_The Terminal application. The command `git log --stat` is run. It displays commits and zooms in on the first commit's stats showing the CSS file with 5 lines added._

The Terminal application. The command git log --stat is run. It displays commits and zooms in on the first commit's stats showing the CSS file with 5 lines added.

git log -p

The git log command has a flag that can be used to display the actual changes made to a file. The flag is --patch which can be shortened to just -p:

$ git log -p

Run this command and check out what it displays.

_The Terminal application showing the output of the `git log -p` command. Note - the colors in your terminal might differ._

The Terminal application showing the output of the git log -p command. Note - the colors in your terminal might differ.

Nd016 WebND Ud123 Gitcourse BETAMOJITO L3 42 Git Log -P Output Walkthru

_The Terminal application showing the output of the `git log -p` command. Check below for a detailed description of the output._

The Terminal application showing the output of the git log -p command. Check below for a detailed description of the output.

Annotated git log -p Output

Using the image above, let's do a quick recap of the git log -p output:

  • 🔵 - the file that is being displayed
  • 🔶 - the hash of the first version of the file and the hash of the second version of the file
    • not usually important, so it's safe to ignore
  • ❤️ - the old version and current version of the file
  • 🔍 - the lines where the file is added and how many lines there are
    • -15,83 indicates that the old version (represented by the -) started at line 15 and that the file had 83 lines
    • +15,85 indicates that the current version (represented by the +) starts at line 15 and that there are now 85 lines…these 85 lines are shown in the patch below
  • ✏️ - the actual changes made in the commit
    • lines that are red and start with a minus (-) were in the original version of the file but have been removed by the commit
    • lines that are green and start with a plus (+) are new lines that have been added in the commit

Further Research

Edits Start Where?

Using what you've learned so far about git log's -p flag, look at the commit with the SHA 50d835d. What line number in app.css should you start looking at to see what has been changed?

Tip - don't forget that while looking at the git log output, the d key will scroll down by half a page while the u key will scroll up half a page.
SOLUTION: line 127

What Was Added?

Using git log and any of its flags, what code was added in by commit 4a60beb?
SOLUTION: color: #2e3d49;

Combine Flags?

git log --stat and git log -p are both really helpful commands. Wouldn't it be great if we could have both of their output at the same time? Hmmm…

What happens when git log -p --stat is run?
SOLUTION: it displays both with the stats info above the patch info

In the video above, we looked at a commit that indents a lot of code. The patch output shows all of those lines as having been removed and then added again at their new level of indentation. Showing all of the indent changes makes it hard to tell what was actually added, though.

Whitespace Changes?

What does the -w flag do to the patch information? For help, check this Git docs page.
SOLUTION: it ignores whitespace changes

git log -p Recap

To recap, the -p flag (which is the same as the --patch flag) is used to alter how git log displays information:

$ git log -p

This command adds the following to the default output:

  • displays the files that have been modified
  • displays the location of the lines that have been added/removed
  • displays the actual changes that have been made

Next Concept